<template>
    <view class="electric">
        <div class="container">
            <div class="battery">
                <image src="https://z3.ax1x.com/2021/04/10/cavQPK.png" mode=""></image>
                <text class="time">{{ num }}%</text>
            </div>
        </div>
        <!--       <view class="cartoon">
            <view class="header"></view>
            <view class="header-item">
            
                <view class="show"></view>
            </view>
        </view> -->
        <view class="show-item">
            <view class="left">
                <view>已充时长(分)</view>
                <view>{{ charginminute }}</view>
            </view>
            <view class="rigth">
                <view>剩余时长(分)</view>
                <view>{{ timeremaining }}</view>
            </view>
        </view>
        <view class="show-item">
            <view class="left">
                <view>已充电量(度)</view>
                <view>{{ chargingdegree }}</view>
            </view>
            <view class="rigth">
                <view>充电费用(元)</view>
                <view>{{ price }}</view>
            </view>
        </view>
        <button type="primary" @click="end">结束充电</button>
    </view>
</template>

<script>
import { createNamespacedHelpers } from 'vuex';
const { mapState, mapMutations, mapActions } = createNamespacedHelpers('map');
export default {
    data() {
        return {
            num: 0,
            chargin: 0,
            remaining: 1800,
            number: 0.4,
            timer: null,
            timer1: null,
            //开始时间
            chargeStartTime: null,
            //充电结束时间
            chargeEndTime: ''
        };
    },
    methods: {
        time() {
            this.timer = setInterval(() => this.num++, 18000);
        },
        chargingtime() {
            this.timer1 = setInterval(() => {
                this.chargin++;
            }, 10);
        },
        //结束充电
        end() {
            this.chargeEndTime = new Date();
            let arr = [];
            arr.push({ chargingdegree: this.chargingdegree },
            { chargeStartTime: this.chargeStartTime }, 
            { chargeEndTime: this.chargeEndTime },
            { price: this.price });
            uni.setStorageSync('arr', arr);
            uni.redirectTo({
                url: '../submitorder/submitorder'
            });
        }
    },
    watch: {
        chargin: {
            handler(a, b) {
                if (a >= 1800) {
                    clearInterval(this.timer);
                    clearInterval(this.timer1);
                }
            }
        }
    },
    computed: {
        ...mapState(['bridge']),
        //已充时长
        charginminute() {
            return (this.chargin / 60).toFixed(1);
        },
        //剩余时长
        timeremaining() {
            return 30 - this.charginminute;
        },
        //已充电量
        chargingdegree() {
            return (this.charginminute * this.number).toFixed(1);
        },
        //充电费用
        price() {
            return (this.bridge[0].stationPrice * this.chargingdegree).toFixed(1);
        }
    },
    mounted() {
        this.time();
        this.chargingtime();
        this.chargeStartTime = new Date();
    }
};
</script>

<style lang="scss" scoped>
.electric {
    // position: relative;
    .container {
        display: flex;
        justify-content: center; /* 水平居中 */
        align-items: center; /* 垂直居中 */
        height: 600rpx;
        .battery {
            height: 170px;
            width: 90px;
            box-sizing: border-box; /* 即width=content+padding+borde */
            border-radius: 15px 15px 5px 5px;
            filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.22)); /*实际效果与box-shadow属性很相似，通过滤镜，一些浏览器为了更好的性能会提供硬件加速 */
            background: #fff;
            z-index: 1;
            position: relative;
            image {
                width: 60rpx;
                height: 80rpx;
                left: 60rpx;
                top: 80rpx;
                position: absolute;
                z-index: 10;
            }
            .time {
                position: absolute;
                left: 60rpx;
                top: 150rpx;
                z-index: 999;
                font-size: 36rpx;
                color: #f0ad4e;
            }
        }
        .battery::before {
            content: '';
            position: absolute;
            width: 26px;
            height: 10px;
            left: 50%;
            top: 0;
            transform: translate(-50%, -10px);
            border-radius: 5px 5px 0 0;
            background: rgba(240, 240, 240, 0.88);
        }
        .battery::after {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            top: 95%;
            background: linear-gradient(to bottom, #7abcff 0%, #00bcd4 44%, #2196f3 100%);
            border-radius: 0px 0px 5px 5px;
            box-shadow: 0 14px 28px rgba(33, 150, 243, 0), 0 10px 10px rgba(9, 188, 215, 0.08);
            animation: charging 1400s ease-in-out infinite;
            filter: hue-rotate(90deg); /*给图像应用色相旋转*/
        }
        @keyframes charging {
            50% {
                box-shadow: 0 14px 28px rgba(0, 150, 136, 0.83), 0px 4px 10px rgba(9, 188, 215, 0.4);
            }

            95% {
                top: 5%;
                filter: hue-rotate(0deg);
                border-radius: 0 0 5px 5px;
                box-shadow: 0 14px 28px rgba(4, 188, 213, 0.2), 0 10px 10px rgba(9, 188, 215, 0.08);
            }
            100% {
                top: 0%;
                filter: hue-rotate(0deg);
                border-radius: 15px 15px 5px 5px;
                box-shadow: 0 14px 28px rgba(4, 188, 213, 0), 0 10px 10px rgba(9, 188, 215, 0.4);
            }
        }
    }

    // .cartoon {
    //     margin: auto;
    //     margin-top: 174rpx;
    //     margin-bottom: 80rpx;
    //     width: 400rpx;
    //     height: 400rpx;
    //     // display: flex;
    //     // justify-content: center;
    //     .header {
    //         margin: auto;
    //         width: 60rpx;
    //         height: 15rpx;
    //         border: 8rpx solid #087dfe;
    //         border-bottom: none;
    //         border-radius: 20rpx 20rpx 0 0;
    //         background-color: #8ed4ff;
    //     }
    //     .header-item {
    //         margin: auto;
    //         // margin-top: -27rpx;
    //         width: 120rpx;
    //         height: 230rpx;
    //         border: 8rpx solid #087dfe;
    //         border-radius: 30rpx;
    //         position: relative;
    //         image {
    //             width: 60rpx;
    //             height: 80rpx;
    //             left: 32rpx;
    //             top: 30rpx;
    //             position: absolute;
    //         }
    //         .show {
    //             width: 121rpx;
    //             transform: translateY();
    //             background-color: pink;
    //             border-radius: 22rpx;
    //         }
    //     }
    // }
    .show-item {
        width: 400rpx;
        display: flex;
        margin-bottom: 60rpx !important;
        justify-content: space-between;
        margin: auto;
        .left {
            text-align: center;
            view:nth-child(1) {
                font-size: 24rpx;
                color: #666666;
                margin-bottom: 24rpx;
            }
            view:nth-child(2) {
                font-size: 36rpx;
                color: #333333;
            }
        }
        .rigth {
            text-align: center;
            view:nth-child(1) {
                font-size: 24rpx;
                color: #666666;
                margin-bottom: 24rpx;
            }
            view:nth-child(2) {
                font-size: 36rpx;
                color: #333333;
            }
        }
    }
    button {
        width: 510rpx;
        height: 92rpx;
        font-size: 36rpx;
        color: #ffffff;
        background-image: linear-gradient(120deg, #1fa6fc 0%, #006fff 100%);
        border-radius: 46rpx;
    }
}
</style>
